<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      div {
        width: 100px;
        height: 100px;
        margin-top: 20px;
      }
      
      .background-color {
        width: 200px;
        height: 200px;
      }
      
      .background-image {
        background-color: pink;
        background-image: url("./static/star.svg");
      }
      
      .background-image-tow {
        background-color: pink;
        background-image: url("./static/star.svg"), url("./static/love.svg");
        background-size: 100px, 200px;
      }
      
      .background-repeat {
        background-color: pink;
        background-image: url("./static/star.svg");
        background-size: 50px;
      }
      
      .background-size {
        width: 150px;
        height: 100px;
        background-color: pink;
        background-image: url("./static/star.svg");
        background-repeat: no-repeat;
      }
      
      .background-position {
        background-color: pink;
        background-image: url("./static/star.svg");
        background-repeat: no-repeat;
        background-size: 50px;
      }
      
      .background-origin {
        background-color: pink;
        background-image: url("./static/star.svg");
        background-repeat: no-repeat;
        background-size: 50px;
        padding: 20px;
        border: 10px skyblue solid;
      }
      
      .background-clip {
        background-color: pink;
        background-image: url("./static/star.svg");
        background-size: 50px;
        padding: 20px;
        border: 10px transparent solid;
      }
      
      .background-attachment {
        width: 200px;
        height: 200px;
        background-image: url("./static/star.svg");
        background-size: 100px;
      }
      
      .background {
        padding: 20px;
        border: 10px skyblue solid;
        background: url("./static/star.svg") pink 0px/50px no-repeat border-box content-box;
      }
      
      .linear-gradient {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: darkgray;
      }
      
      .radial-gradient {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: darkgray;
      }
    </style>
  </head>
  <body>
    <!--1.背景样式-->
    <!--①background-color属性设置背景颜色，背景颜色填充于内容区和内边距之下-->
    <div class="background-color" style="padding: 50px;background-color: pink"></div>
    <!--②background-image属性设置背景图片，背景图片填充于内容区和内边距之下且优先级高于背景颜色。若图片小于盒模型则平铺以填充方框，若图片大于盒模型则只展示部分图片。多个背景图片之间使用逗号分隔-->
    <div class="background-image" style="width: 100px;height: 100px"></div>
    <div class="background-image" style="width: 400px;height: 400px"></div>
    <div class="background-image-tow" style="width: 200px;height: 200px"></div>
    <!--③background-repeat属性设置背景图片平铺行为，其属性值可为不重复no-repeat、水平重复repeat-x、垂直重复repeat-y或水平垂直都重复repeat-->
    <div class="background-repeat" style="background-repeat: no-repeat"></div>
    <div class="background-repeat" style="background-repeat: repeat-x"></div>
    <div class="background-repeat" style="background-repeat: repeat-y"></div>
    <div class="background-repeat" style="background-repeat: repeat"></div>
    <!--④background-size属性设置背景图片大小，其属性值可为长度、百分比或关键字，其中关键字有将图片铺满且比例不变cover和将图片适应盒子大小且比例不变contain-->
    <div class="background-size" style="background-size: 40px"></div>
    <div class="background-size" style="background-size: 80%"></div>
    <div class="background-size" style="background-size: cover"></div>
    <div class="background-size" style="background-size: contain"></div>
    <!--⑤background-position属性设置背景图片位置，其属性值可为长度、关键字或长度加关键字，其中关键字有top、bottom、left、right和center。背景图片位置默认从(0,0)开始-->
    <!--background-position: x轴 y轴-->
    <div class="background-position" style="background-position: 50px 50px"></div>
    <!--只使用一个关键字时，第二个关键字默认为center-->
    <div class="background-position" style="background-position: top"></div>
    <div class="background-position" style="background-position: top right"></div>
    <!--长度关键字结合-->
    <div class="background-position" style="background-position: top 10px right 10px"></div>
    <!--⑥background-origin属性设置背景原点位置，其属性值可为原点从边框左上角开始的border-box、原点从内边距左上角开始的padding-box或原点从内容区左上角开始的content-box-->
    <div class="background-origin" style="background-origin: border-box"></div>
    <div class="background-origin" style="background-origin: padding-box"></div>
    <div class="background-origin" style="background-origin: content-box"></div>
    <!--⑦background-clip属性设置背景范围，其属性值可为范围为边框及以内的border-box、范围为内边距及以内的padding-box或范围为内容区的content-box-->
    <div class="background-clip" style="background-clip: border-box"></div>
    <div class="background-clip" style="background-clip: padding-box"></div>
    <div class="background-clip" style="background-clip: content-box"></div>
    <!--⑧background-attachment属性设置背景是否跟随元素移动，其属性值可为随元素移动scroll或不随元素移动fixed-->
    <div style="height: 400px;width:300px;border: 1px black solid;overflow: auto">
      <div class="background-attachment"
        style="background-color: pink;background-attachment: fixed;height:400px;overflow: auto">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </div>
      <div class="background-attachment" style="background-color: skyblue;background-attachment: scroll;overflow: auto">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </div>
    </div>
    <!--⑨background属性设置背景相关样式，其属性值顺序中注意background-position须在background-size前面并使用/分隔、background-origin须在background-clip前面-->
    <div class="background"></div>
    
    <!--2.渐变背景-->
    <!--线性渐变指颜色沿着一条直线变化，通过`background-image: linear-gradient()`实现。linear-gradient函数的参数由渐变方向和渐变颜色组成，其中渐变方向可为to left、to right、to top、to bottom关键字或45deg度数或0.4turn圈，多个渐变颜色平均分布并通过逗号分隔。通过`background-image: repeating-linear-gradient()`实现线性渐变的平铺-->
    <div style="display: flex;column-gap: 10px;width: 100%;height: auto">
      <div class="linear-gradient" style="background-image: linear-gradient(pink,skyblue,plum)">no</div>
      <div class="linear-gradient" style="background-image: linear-gradient(to left,pink,skyblue)">left</div>
      <div class="linear-gradient" style="background-image: linear-gradient(to right,pink,skyblue)">right</div>
      <div class="linear-gradient" style="background-image: linear-gradient(to top,pink,skyblue)">top</div>
      <div class="linear-gradient" style="background-image: linear-gradient(to bottom,pink,skyblue)">bottom</div>
      <div class="linear-gradient" style="background-image: linear-gradient(45deg,pink,skyblue)">45deg</div>
      <div class="linear-gradient" style="background-image: linear-gradient(0.4turn,pink,skyblue)">0.4turn</div>
      <div class="linear-gradient" style="background-image: repeating-linear-gradient(pink,skyblue)">no-repeating</div>
      <div class="linear-gradient" style="background-image: repeating-linear-gradient(pink 0px,skyblue 50px)">
        repeating
      </div>
    </div>
    <!--径向渐变指颜色呈放射状变化，通过`background-image: radial-gradient()`实现。radial-gradient函数的参数由渐变位置、渐变大小和渐变形状组成，其中渐变位置可为at left、at right、at top、at bottom关键字或设置宽高100px 50px，渐变大小可为近边closest-side、远边farthest-side、近角closest-corner或远角farthest-corner，渐变形状可为circle或ellipse。通过`background-image: repeating-radial-gradient()`实现径向渐变的平铺-->
    <div style="display: flex;column-gap: 10px;width: 100%;height: auto">
      <div class="radial-gradient" style="background-image: radial-gradient(pink,skyblue,plum)">no</div>
      <div class="radial-gradient" style="background-image: radial-gradient(at left,pink,skyblue)">at left</div>
      <div class="radial-gradient" style="background-image: radial-gradient(at right,pink,skyblue)">at right</div>
      <div class="radial-gradient" style="background-image: radial-gradient(at top,pink,skyblue)">at top</div>
      <div class="radial-gradient" style="background-image: radial-gradient(at bottom,pink,skyblue)">at bottom</div>
      <div class="radial-gradient" style="background-image: radial-gradient(100px 50px,pink,skyblue)">100px 50px</div>
    </div>
    
    <div style="display: flex;column-gap: 10px;width: 100%;height: auto">
      <div class="radial-gradient" style="background-image: radial-gradient(closest-side,pink,skyblue)">closest-side
      </div>
      <div class="radial-gradient" style="background-image: radial-gradient(farthest-side,pink,skyblue)">farthest-side
      </div>
      <div class="radial-gradient" style="background-image: radial-gradient(closest-corner,pink,skyblue)">
        closest-corner
      </div>
      <div class="radial-gradient" style="background-image: radial-gradient(farthest-corner,pink,skyblue)">
        farthest-corner
      </div>
      <div class="radial-gradient" style="width:300px;background-image: radial-gradient(circle,pink,skyblue)">circle
      </div>
      <div class="radial-gradient" style="width:300px;background-image: radial-gradient(ellipse,pink,skyblue)">ellipse
      </div>
    </div>
    
    <div style="display: flex;column-gap: 10px;width: 100%;height: auto">
      <div class="radial-gradient"
        style="width:300px;background-image: radial-gradient(circle at 50px 100px,pink 50px,skyblue 100px)">
        radial-gradient
      </div>
      <div class="radial-gradient" style="background-image: repeating-radial-gradient(pink,skyblue)">no-repeating</div>
      <div class="radial-gradient" style="background-image: repeating-radial-gradient(pink 0px,skyblue 50px)">repeating
      </div>
      <div class="radial-gradient"
        style="width:300px;background-image: repeating-radial-gradient(circle at 50px 100px,pink 0px,skyblue 50px)">
        repeating-radial-gradient
      </div>
    </div>
  </body>
</html>